<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2022-12-02 17:04:52
 * @LastEditors: huangtianyang
 * @LastEditTime: 2023-08-31 11:20:25
 * @FilePath: \cxl-h5\src\pages\login\register\Index.vue
-->
<template>
    <section>
        <section class="register-container" ref="boxRef">
            <h1>企业注册</h1>
            <section class="register-information line">
                <h2><i class="complete">1</i> 基本信息</h2>
                <section class="box">
                    <BaseInformationVue @update="data.onBaseInformationUpdate" register="true" ref="baseRef" />
                </section>
            </section>
            <section class="register-information line">
                <h2><i>2</i> 企业信息</h2>
                <section class="box">
                    <cxl-input
                        type="text"
                        v-model="data.companyName"
                        placeholder="请输入企业名称"
                        required
                        round
                        clearable
                        bgColor="#fff"
                        errorText="企业名称不能为空！"
                        ref="companyRef"
                    ></cxl-input>

                    <cxl-input
                        type="text"
                        v-model="data.socialCreditCode"
                        placeholder="请输入统一社会信用代码"
                        required
                        round
                        clearable
                        bgColor="#fff"
                        errorText="统一社会信用代码不能为空！"
                        check-type="socialCreditCode"
                        ref="socialCreditCodeRef"
                        @blur="data.checkSocialCreditCode"
                    ></cxl-input>
                    <section class="addr">
                        <section :class="['addr-select', data.isSelectProvince && data.isSelectCity ? '' : 'error']">
                            <span>
                                <cxl-select
                                    :value="data.province"
                                    placeholder="请选择省份"
                                    :list="data.provinceOptions"
                                    @change="data.onSelectProvince"
                                ></cxl-select>
                            </span>
                            <span>
                                <cxl-select
                                    :value="data.city"
                                    placeholder="请选择市"
                                    :list="data.cityOptions"
                                    @change="data.onSelectCity"
                                ></cxl-select>
                            </span>
                        </section>
                        <section class="err">
                            <template v-if="data.isSelectProvince">
                                <template v-if="!data.isSelectCity">请选择市！</template>
                            </template>
                            <template v-else>请选择省！</template>
                        </section>
                    </section>
                    <section
                        :class="[
                            'load-image',
                            data.localImageUrl === '' ? '' : 'active',
                            data.isUploadImg ? '' : 'err-load'
                        ]"
                        @click="data.uploadFile"
                    >
                        <section>
                            <template v-if="data.localImageUrl == ''">
                                <span class="iconfont icon-xiazai"></span>
                                <p>上传企业营业执照</p>
                            </template>
                            <template v-else>
                                <img :src="data.localImageUrl" alt="" />
                            </template>
                        </section>

                        <uploadfileVue @base64="data.onUploadFileBase64"></uploadfileVue>
                        <span class="reload" v-if="data.localImageUrl !== ''">重新上传</span>
                        <loading v-model="data.uploading" />
                    </section>
                    <section class="err img">
                        {{ data.isUploadImg ? '' : '请上传营业执照！' }}
                    </section>
                    <section class="register-line hint">
                        <i>*</i>仅支持经营汽车相关业务的企业注册，图片格式除png/jpg/jpeg外，其他均不支持
                    </section>
                </section>
            </section>
            <section class="register-other">
                <h2><i>3</i>其它信息</h2>
                <section class="box">
                    <cxl-input
                        type="text"
                        v-model="data.introducerCode"
                        placeholder="请输入编码（非必填）"
                        round
                        clearable
                        bgColor="#fff"
                    ></cxl-input>
                </section>
            </section>

            <section class="checkbox">
                <label>
                    <cxl-checkbox v-model="data.isCheck" @change="data.onCheckChange" />我已阅读并同意
                    <i @click.prevent="data.onOpenProtocol('USER_AGREEMENT')">《用户使用协议》</i>、<i
                        @click.prevent="data.onOpenProtocol('PRIVACY_AGREEMENT')"
                        >《隐私政策》</i
                    ></label
                >
                <section class="err img">
                    {{ data.isSelectCheck ? '' : '请仔细阅读协议并勾选！' }}
                </section>
            </section>
            <section class="register-line btn">
                <cxl-button
                    type="primary"
                    round
                    :active="data.data.active"
                    @click="data.onSubmitRegister(baseRef, companyRef, socialCreditCodeRef, boxRef)"
                    >提交注册</cxl-button
                >
            </section>
        </section>

        <dialogVue v-model="data.submitVisible" type="audit" @close="data.onSubmitDialogClose">
            <template #content>
                <section class="dialog">
                    <h1>提交成功，请等待管理员审核！</h1>
                    <p>预计在24小时内审核完毕，审核结果会通过短信的形式，将通知发到您的手机上。</p>
                </section>
            </template>
        </dialogVue>
        <dialogVue v-model="data.auditVisible" type="submit">
            <template #content>
                <section class="dialog">
                    <h1>您提交的申请正在审核中， 请耐心等待！</h1>
                </section>
            </template>
        </dialogVue>
        <!-- 退出申请提示 -->
        <dialogVue v-model="data.quitVisible" type="submit" :show-close="false">
            <template #content>
                <section class="dialog quit">
                    <h1>您确定要取消注册吗？</h1>
                    <h2>离开页面后信息将被清空</h2>
                    <span class="comfirm" @click="onConfirmQuit">确定</span>
                    <span class="quit" @click="data.onCancelQuit">取消</span>
                </section>
            </template>
        </dialogVue>
    </section>
</template>
<script setup lang="ts" name="register">
import { ref, reactive, onUnmounted, onActivated, onDeactivated } from 'vue'
import { RegisterData } from '.'
import BaseInformationVue from '../base/Index.vue'
import dialogVue from '@/components/dialog/Index.vue'
import loading from '@/components/loading/Index.vue'
import uploadfileVue from '@/components/uploadFile/Index.vue'
import { onBeforeRouteLeave, useRouter } from 'vue-router'

const router = useRouter()

const baseRef = ref()
const companyRef = ref()
const socialCreditCodeRef = ref()
const boxRef = ref()

//初始化数据
const data = reactive(new RegisterData())
// 用户是否填写过数据
const isFillIn = () => {
    return data.phone ||
        data.code ||
        data.password ||
        data.passwordAgain ||
        data.companyName ||
        data.provinceId ||
        data.cityId ||
        data.companyBusinessImageKey ||
        data.socialCreditCode
        ? true
        : false
}

const isConfirmQuit = ref(false)

//重置数据
const reset = () => {
    data.quitVisible = false
    companyRef.value.reset()
    socialCreditCodeRef.value.reset()
    isConfirmQuit.value = false
    data.reset()
}

const onConfirmQuit = () => {
    isConfirmQuit.value = true
    router.go(-1)
}

onUnmounted(() => {
    data.countDownInstance.stop()
})
onActivated(() => {
    data.cityByParentId('')
})
onDeactivated(() => {
    console.log('onDeactivated', router.currentRoute.value)
    if (!['protocol', 'register'].includes(router.currentRoute.value.name as string)) {
        reset()
    }
})

onBeforeRouteLeave((to, from, next) => {
    if (!['protocol', 'register'].includes(to.name as string)) {
        if (!isConfirmQuit.value && isFillIn() && !data.isSubmitRegister) {
            data.quitVisible = true
            next(false)
        } else {
            next()
        }
    } else {
        next()
    }
})
</script>

<style scoped lang="scss">
.err {
    line-height: var(--cxl-size-22);
    font-size: var(--cxl-size-12);
    min-height: var(--cxl-size-22);
    color: var(--cxl-color-ff5448);
    box-sizing: border-box;
    padding-left: var(--cxl-size-12);
    &.img {
        padding-left: 0;
    }
}

.register-container {
    min-height: 100vh;
    box-sizing: border-box;
    padding: var(--cxl-size-20) var(--cxl-size-30);
    background-color: var(--cxl-color-f2f6f8);
    height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: env(safe-area-inset-bottom);

    h1 {
        font-size: var(--cxl-size-24);
        margin-bottom: var(--cxl-size-20);
    }
    h2 {
        font-size: var(--cxl-size-18);
        display: flex;
        align-items: center;
        z-index: 2;
        position: relative;
        i {
            display: block;
            font-style: normal;
            text-align: center;
            line-height: var(--cxl-size-20);
            width: var(--cxl-size-20);
            height: var(--cxl-size-20);
            border-radius: 50%;
            background-color: var(--cxl-color-white);
            color: var(--cxl-text-color-regular);
            font-size: var(--cxl-size-12);
            margin: 0 var(--cxl-size-10) 0 0;
            &.complete {
                background-color: var(--cxl-color-primary);
                color: var(--cxl-color-white);
            }
        }

        margin: 0 0 var(--cxl-size-20) 0;
    }
}
.line {
    position: relative;
    &::after {
        content: '';
        width: 1px;
        height: 100%;
        background-color: var(--cxl-color-cccccc);
        display: block;
        position: absolute;
        top: var(--cxl-size-20);
        left: calc(var(--cxl-size-20) / 2);
    }
}
.box {
    box-sizing: border-box;
    padding-left: calc(var(--cxl-size-20) + var(--cxl-size-10));
}
.addr {
    .addr-select {
        background-color: var(--cxl-color-white);
        border-radius: var(--cxl-size-40);
        display: flex;
        box-sizing: border-box;
        border: 1px solid transparent;
        > span {
            width: 50%;
            display: block;
            box-sizing: border-box;

            &:nth-child(1) {
                padding: 0 0 0 0;
            }
        }
        &.error {
            border-color: var(--cxl-color-ff5448);
        }
    }
}
.register-other {
    padding-top: var(--cxl-size-16);
}

.checkbox {
    font-size: var(--cxl-size-12);

    margin-bottom: var(--cxl-size-16);
    > label {
        display: flex;
        align-items: center;
    }
    i {
        font-style: normal;
        color: var(--cxl-color-primary);
    }
}

.load-image {
    width: 100%;
    box-sizing: border-box;
    height: 16rem;
    border-radius: 0.5rem;
    border: 2px dashed var(--cxl-color-999999);
    background-color: var(--cxl-color-white);

    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    &.err-load {
        border-color: var(--cxl-color-ff5448);
    }
    &.active {
        border: none;
    }
    > section {
        width: 100%;
        text-align: center;
        color: var(--cxl-color-999999);
        span {
            font-size: 4rem;
        }
        img {
            display: block;
            width: 100%;
            height: 100%;
        }
        p {
            font-size: var(--cxl-size-12);
        }
    }
    .reload {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 2.7rem;
        background-color: rgba(0, 0, 0, 0.5);
        text-align: center;
        color: var(--cxl-color-white);
        font-size: var(--cxl-size-12);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .loading {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(0, 0, 0, 0.05);
    }
}
.hint {
    font-size: var(--cxl-size-12);
}

.btn {
    margin: var(--cxl-size-16) 0 var(--cxl-size-16) 0;
}

.dialog {
    text-align: center;
    &.quit {
        h1 {
            text-align: center;
            font-size: var(--cxl-size-16);
        }
        h2 {
            text-align: center;
            display: block;
            font-weight: 400;
            margin: var(--cxl-size-6) 0 var(--cxl-size-20) 0;
            font-size: var(--cxl-size-14);
        }
        span {
            border-radius: var(--cxl-size-6);
            background-color: var(--cxl-color-primary);
            color: var(--cxl-color-white);
            font-size: var(--cxl-size-14);
            padding: var(--cxl-size-8) var(--cxl-size-24);
            margin: 0 var(--cxl-size-12);
            &.quit {
                box-sizing: border-box;
                border: 1px solid var(--cxl-color-primary);
                color: var(--cxl-color-primary);
                background-color: transparent;
            }
        }
    }
    h1 {
        font-size: var(--cxl-size-18);
        margin: 0;
    }
    p {
        font-size: var(--cxl-size-12);
        color: var(--cxl-color-666666);
        margin: var(--cxl-size-6) 0;
    }
}
</style>
